<template>
  <Page title="请假申请">
    <template #navBarCustom> </template>
    <template #content>
      <div class="w-full h-full p-20px box-border">
        <div class="container w-full h-full bg-white flex flex-col overflow-hidden">
          <scroll-view class="flex-1 overflow-scroll">
            <div class="form w-full p-20px box-border">
              <div class="item flex">
                <div class="label flex text-333">
                  <span class="text-FF4040">*</span>申请类型：
                </div>
                <div class="content">
                  <el-select v-model="form.type" placeholder="请选择" style="width: 5.7rem">
                    <el-option label="事假" :value="1"> </el-option>
                    <el-option label="病假" :value="2"> </el-option>
                  </el-select>
                </div>
              </div>
              <div class="item flex mt-20px">
                <div class="label flex text-333">
                  <span class="text-FF4040">*</span>开始时间：
                </div>
                <div class="content">
                  <el-date-picker
                    v-model="form.startTime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择开始时间"
                    :editable="false"
                    style="width: 5.7rem"
                    @focus="onDatePickerFocus"
                  >
                  </el-date-picker>
                </div>
              </div>
              <div class="item flex mt-20px">
                <div class="label flex text-333">
                  <span class="text-FF4040">*</span>结束时间：
                </div>
                <div class="content">
                  <el-date-picker
                    v-model="form.endTime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择结束时间"
                    :editable="false"
                    style="width: 5.7rem"
                    @focus="onDatePickerFocus"
                  >
                  </el-date-picker>
                </div>
              </div>
              <div class="item flex mt-20px">
                <div class="label flex text-333">
                  <span class="text-FF4040">*</span>是否离校：
                </div>
                <div class="content">
                  <el-select v-model="form.leaveType" placeholder="请选择" style="width: 5.7rem">
                    <el-option label="是" :value="0"> </el-option>
                    <el-option label="否" :value="1"> </el-option>
                  </el-select>
                </div>
              </div>
              <div class="item flex mt-20px">
                <div class="label flex text-333">
                  <span class="text-FF4040">*</span>请假事由：
                </div>
                <div class="content">
                  <el-input
                    type="textarea"
                    :rows="4"
                    :maxlength="100"
                    resize="none"
                    placeholder="请输入请假原因"
                    v-model="form.reason"
                    style="font-size: 0.2rem"
                  >
                  </el-input>
                </div>
              </div>
            </div>
          </scroll-view>
          <!-- 提交 -->
          <div class="my-20px flex-center">
            <CustomButton class="block" style="width: 4.53rem" @click="submit">提交</CustomButton>
          </div>
        </div>
      </div>
    </template>
  </Page>
</template>

<script>
import Page from '@/components/page'
import ScrollView from '@/components/scroll-view'
import CustomButton from '@/components/button'
import { createAskForLeaveApi } from '@/api/ask-for-leave'

export default {
  components: {
    Page,
    ScrollView,
    CustomButton
  },
  data() {
    return {
      form: {
        type: null, // 申请类型 1 => 事假，2 => 病假
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        leaveType: null, // 是否离校 0 => 是，1 => 否
        reason: null // 请假原因
      }
    }
  },
  mounted() {},
  methods: {
    onDatePickerFocus() {
      this.$nextTick(() => {
        const datePickerEditors = document.querySelectorAll('.el-date-picker__editor-wrap input')
        datePickerEditors.forEach((datePickerEditor) => {
          datePickerEditor.setAttribute('readonly', 'readonly')
        })
      })
    },
    async submit() {
      const { form } = this

      if (!form.type) {
        this.$message.error('请选择申请类型')
        return
      }

      if (!form.startTime) {
        this.$message.error('请选择开始时间')
        return
      }

      if (!form.endTime) {
        this.$message.error('请选择结束时间')
        return
      }

      if (new Date(form.endTime).getTime() <= new Date(form.startTime).getTime()) {
        this.$message.error('请输入有效的开始时间和结束时间')
        return
      }

      if (form.leaveType === null) {
        this.$message.error('请选择是否离校')
        return
      }

      if (!form.reason) {
        this.$message.error('请输入请假原因')
        return
      }

      const { code, msg } = await createAskForLeaveApi(form)

      if (code === 0) {
        this.$route.params.completed = true
        this.$router.back()
      } else {
        this.$message.error(msg)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  border-radius: 16px;

  .form {
    .item {
      .label {
        font-size: 20px;
        line-height: 44px;
      }

      .content {
        font-size: 20px;
        width: 5.7rem;
      }
    }
  }
}
</style>
